<template>
    <div class="kaoqin">
        <div class="fan">
            <div class="kao-left">
                <el-button type="primary" icon="ArrowLeft" circle size="small" @click="back" class="xg" />
                <span class="zuo">开始考勤</span>
            </div>
            <div class="kao-rigth">
                <el-button @click="back" class="qx">取消</el-button>
                <el-button type="primary" @click="back" class="xg">确认</el-button>
            </div>
        </div>
        <div class="fa">
            <div class="mid">
                <el-form :model="form">
                    <p>考勤时间：<el-input placeholder="请输入xxxx-xx-xx" style="width: 200px;" @change="chaxun"
                            v-model="form.time" /></p>
                </el-form>
                <p>应到：{{ count }}人 实到：{{ count - shidao }}人</p>
            </div>
            <el-table :data="list" border style="width: 100%" stripe="true">
                <el-table-column label="序号" prop="">
                    <template #default="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="年纪班级">
                    <template #default="scope">
                        <span>{{ nian.gradeId[scope.row.student.classes.gradeId] +
                            nian.classId[scope.row.student.classes.classId] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="学生姓名">
                    <template #default="scope">
                        <span>{{ scope.row.student.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="性别">
                    <template #default="scope">
                        <span>{{ scope.row.student.sex == 1 ? '男' : '女' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="学籍号">
                    <template #default="scope">
                        <span>{{ scope.row.sId }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="今日考勤状态">
                    <template #default="scope">
                        <span :class="scope.row.state == 0 ? 'active' : 'actives'">{{ nian.state[scope.row.state] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="修改状态" width="240">
                    <template #default="scope">
                        <span><el-button @click="queqin(scope.row.id)">标记为缺勤</el-button></span><span><el-button
                                @click="chidao(scope.row.id)">标记为迟到</el-button></span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import server from '@/api/index';
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus';
import { ref, onMounted } from 'vue'
var router = useRouter()
let form = ref({ time: '', classesId: '1000301' })
var list = ref()
var count = ref()
var shidao = 0

const nian: any = ref(
    {
        gradeId: {
            3: '三年级',
            1: '一年级',
            2: '二年级'
        },
        classId: {
            1: '一班',
            2: '二班',
            3: '三班',
        },
        state: {
            0: '正常',
            1: '迟到',
            2: '缺勤'
        }
    })
onMounted(async () => {
    var rew = await server.home.getAttendanceByClassesTimeByPage({ time: '2023-04-07', classesId: '1000301' })
    list.value = rew.data.data.date
    // console.log(rew.data.data.date);
    // console.log(list.value.length);
    count = list.value.length
    for (var i = 0; i < list.value.length; i++) {
        // console.log(list.value[i].state);
        if (list.value[i].state == 2) {
            shidao++
        }
    }
    // console.log(shidao);
})
var chaxun = async () => {
    var rew = await server.home.getAttendanceByClassesTimeByPage(form.value)
    list.value = rew.data.data.date
}
var queqin = async (id: any) => {
    var res = await server.home.markedAbsent(id)
    // console.log(res.data);
    if (res.data.code == 200) {
        ElNotification.success({ message: '修改成功' });
    } else {
        ElNotification.error({ message: '修改失败' });
    }
}
var chidao = async (id: any) => {
    var res = await server.home.markLate(id)
    // console.log(res.data);
    if (res.data.code == 200) {
        ElNotification.success({ message: '修改成功' });
    } else {
        ElNotification.error({ message: '修改失败' });
    }
}
var back = () => {
    router.go(-1)
}
</script>

<style scoped lang="scss">
.kaoqin {
    width: 100%;
    height: 100%;

    .fan {
        width: 100%;
        height: 80px;
        border-bottom: 1px solid black;
        box-shadow: 0px 0px 5px;
        line-height: 80px;
        margin-bottom: 70px;

        .kao-left {
            height: 80px;
            float: left;
            margin-left: 40px;

            button {
                border: 0;
            }

            span {
                margin-left: 10px;
            }
        }

        .kao-rigth {
            float: right;
            height: 80px;
            margin-right: 30px;
        }


    }

    .fa {
        width: 80%;
        height: 100%;
        padding-top: 50px;
        margin: 0 auto;

    }

    .mid {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 50px;
    }

    .active {
        color: green;
    }

    .actives {
        color: red;
    }

    .el-button {
        border: none;
        background: none;
        color: blue;
    }

    .xg {
        background: #409EFF;
        color: #fff;
        font-weight: bolder;
    }

    .qx {
        border: 1px solid #ccc;
        color: #000;
    }
}
</style>